<template>
  <div class="login-box">
    <el-row>
      <el-col class="login-col" :xs="20" :md="6">
        <div class="login">
          <h2 class="login-title">注册</h2>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
            <el-form-item label="用户名" label-width="79px" prop="username">
              <el-input  placeholder="必填" type="text" v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="79px" prop="password">
              <el-input placeholder="必填" type="password" v-model="ruleForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" label-width="79px" prop="checkPassword">
              <el-input placeholder="必填" type="password" v-model="ruleForm.checkPassword" show-password></el-input>
            </el-form-item>
            <el-form-item prop="email" label-width="79px" label="邮箱">
              <el-input placeholder="选填" v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label-width="79px" label="手机号码">
              <el-input placeholder="选填" v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label-width="0">
              <el-button class="" type="primary" @click="submitForm('ruleForm')">注册</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {register} from "@/api/apis";

export default {
  name: "Register",
  data() {
    const validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (this.ruleForm.username !== '') {
          if (this.ruleForm.username.length > 12 || this.ruleForm.username.length < 3) {
            callback(new Error('用户名必须在3~12个字符之间！'));
          }
          callback();
        }
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.password !== '') {
          callback();
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback();
      } else {
        if (this.ruleForm.phone !== '') {
          if (this.ruleForm.phone.length !== 11) {
            callback(new Error('请输入11位手机号码'));
          }
          if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))) {
            callback(new Error("手机号码不合法"))
          }
          callback();
        }
      }
    };
    return {
      ruleForm: {
        username: '',
        password: '',
        checkPassword: '',
        email: '',
        phone: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: validateUserName, trigger: 'blur'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ]
      }
    };
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleRegister();
        } else {
          // alert('输入的信息不合规范')
          return false;
        }
      });
    },
    handleRegister(){
      let params = new URLSearchParams()
      params.append('username', this.ruleForm.username)
      params.append('password', this.ruleForm.password)
      params.append('phone_number', this.ruleForm.phone)
      params.append('email', this.ruleForm.email)
      register(params).then(() => {
        this.$message.success('注册成功')
        this.$router.push({path: '/login'})
      }).catch(err => {
        this.$alert(err.data.message, '注册失败', {
          confirmButtonText: '了解',
        });
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
}
</script>

<style scoped>
@media only screen and (min-width: 992px){
  .login-col{
    top: 100px !important;
    right: 60px !important;
    left: auto !important;
    }
  }
  .login-col{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .login-box{
    position: fixed;
    width: 100%;
    height: 100%;
    background: url("http://h2.ioliu.cn/bing/Ceking_ZH-CN7314711047_1920x1080.jpg") 0 0 no-repeat;
  }
  .login{
    background-color: #ffffff;
    padding: 30px;
    margin: auto;
    border-radius: 15px;
  }
  .login-title{
    text-align: center;
  }
  .login-form{
    margin-top: 20px;
    vertical-align: center;
  }
  .login-form button{
    width: 48%;
  }
</style>
